@import "tailwindcss";
@plugin "daisyui" {
  themes: night --prefersdark;
  exclude:
    rootscrollgutter, svg, steps, table, status, link, checkbox, rating,
    container, radio, properties, rootcolor, scrollbar;
}

@plugin "daisyui/theme" {
  name: "totaldonut";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(98% 0.002 247.839);
  --color-base-200: oklch(96% 0.003 264.542);
  --color-base-300: oklch(92% 0.006 264.531);
  --color-base-content: oklch(21% 0.034 264.665);
  --color-info: oklch(68% 0.169 237.323);
  --color-info-content: oklch(97% 0.014 254.604);
  --color-secondary: oklch(70% 0.14 182.503);
  --color-secondary-content: oklch(98% 0.022 95.277);
  --color-accent: oklch(58% 0.233 277.117);
  --color-accent-content: oklch(97% 0.014 308.299);
  --color-neutral: oklch(13% 0.028 261.692);
  --color-neutral-content: oklch(98% 0.002 247.839);
  --color-primary: oklch(62% 0.265 303.9);
  --color-primary-content: oklch(98% 0.019 200.873);
  --color-success: oklch(76% 0.233 130.85);
  --color-success-content: oklch(98% 0.018 155.826);
  --color-warning: oklch(76% 0.188 70.08);
  --color-warning-content: oklch(98% 0.016 73.684);
  --color-error: oklch(64% 0.246 16.439);
  --color-error-content: oklch(96% 0.015 12.422);
  --radius-selector: 2rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

@utility label {
  @apply mt-2 mb-1 select-none;
}

@utility card {
  @apply bg-base-200 in-[.light]:bg-base-100 shadow-sm;
}

@utility collapse {
  @apply bg-base-100 border-base-200 sticky top-[0] z-2 m-[0] rounded-none border-b-4 transition-colors;
  .collapse-title {
    @apply transition-[color];
  }
  + div {
    @apply my-1 max-h-[0] overflow-clip px-2 text-start text-xs transition-[max-height];
  }
  &:has(:checked) {
    @apply border-info;
    background-color: color-mix(
      in oklab,
      var(--color-info) 8%,
      var(--color-base-100)
    );
    .collapse-title {
      @apply text-info;
    }
    + div {
      @apply max-h-400;
    }
  }
}

@utility select {
  .modal &::picker(select) {
    @apply max-h-[30dvh] shadow-lg rounded-field;
  }
}

:host {
  -webkit-tap-highlight-color: transparent !important;
  --search-bar-width: 300px;
  --search-bar-radius: 20px;
  --favo-flex-radius: 8px;
  --screen-w: min(100vw, 600px);
  --screen-w-half: calc(var(--screen-w) / 2);
  @apply absolute h-screen w-(--screen-w) text-(--color-base-content);
  --tw-border-style: solid;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-alpha: 100%;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-shadow-alpha: 100%;
  --tw-ring-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
  --root-bg: transparent;
}

::-webkit-search-cancel-button {
  @apply hidden;
}
